<template>
    <div class="home">
        <h2>setup当前计数:{{ $store.state.counter }}</h2>
        <button @click="up">+1</button>
        <h2>options api当前计数:{{ storeCounter }}</h2>
        <h2>ref解构当前计数:{{ counter }}</h2>

        <h2>mapState映射:{{ name }}-{{ age }}</h2>
        <h3>对象写法:{{ sname }}-{{ sage }}</h3>
    </div>
</template>
<script>
// 2.
// 多个数据映射
import { mapState } from 'vuex'
export default {
    computed: {
        storeCounter() {
            return this.$store.state.counter
        },
        ...mapState(["name", "age"]),
        ...mapState({
            sname: state => state.name,
            sage:state=>state.age
        })
    }
}
</script >
<script setup>
import { useStore } from "vuex"
import { toRefs } from "vue"
// 1.
const store = useStore()
// 3.
const { counter } = toRefs(store.state)
// 不是响应式的
// const refcounter=store.state.counter
function up() {
    store.commit("increate")
}


</script>
<style scoped lang="less"></style>